'use client'
import React, { useEffect } from 'react'
import { Form, Input, Button, Typography, message } from 'antd'
import CryptoJS from 'crypto-js'
import './App.css'
import DisableDevtool from 'disable-devtool';
const { Title, Text } = Typography
const globalUrl = globalThis.document?.body?.getAttribute('data-api-prefix')

const Apps = () => {
    useEffect(() => {
        document.title = '登录智能体'
        //开启开发者模式的方法
        // DisableDevtool()
    }, [])

    const SECRET_KEY = 'my-secret-key-16' // 与后端一致的密钥
    const encryptPassword = (password: string) => {
        // 生成随机 IV
        const iv = CryptoJS.lib.WordArray.random(16)
        // 使用 AES-CBC 加密
        const encrypted = CryptoJS.AES.encrypt(password, CryptoJS.enc.Utf8.parse(SECRET_KEY), {
            iv: iv,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7,
        })
        // 拼接 IV 和密文，并进行 Base64 编码
        return CryptoJS.enc.Base64.stringify(iv.concat(encrypted.ciphertext))
    }

    const onFinish = async (values: any) => {
        try {
            const { username, password } = values

            // 对密码进行加密
            //const encryptedPassword = encryptPassword(password)
            const encryptedPassword = password
            // 模拟发送请求到后端
            const response: any = await fetch(`${globalUrl}/login`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    email: username,
                    password: encryptedPassword,
                }),
            })

            const result = await response.json()
            if (result.result === "success") {
                message.success('登录成功')
                localStorage.setItem('console_token', result.data)
                const timer = setTimeout(() => {
                    clearTimeout(timer)
                    window.location.href = '/agent-platform-web/apps?console_token=Bearer ' + result.data
                }, 3000)
            } else {
                message.error('登录失败')
                localStorage.setItem('console_token', '')
            }
        } catch (error) {
            message.error('请求失败，请检查网络或稍后重试')
            console.error('请求错误:', error)
        }
    }

    return (
        <div className="login-page">
            <div className="header">
                <Title level={3} style={{ color: '#0078d7' }}>
                    智能体管理平台
                </Title>
            </div>
            <div className="content">
                <div className="login-box">
                    <Title level={4} style={{ textAlign: 'center' }}>
                        短信登录
                    </Title>
                    <Form
                        name="login"
                        layout="vertical"
                        onFinish={onFinish}
                    >
                        <Form.Item
                            label="人力账号"
                            name="username"
                            rules={[{ required: true, message: '请输入人力账号' }]}
                        >
                            <Input placeholder="请输入人力账号" />
                        </Form.Item>
                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[{ required: true, message: '请输入密码' }]}
                        >
                            <Input.Password placeholder="请输入密码" />
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" block>
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                    <Text type="secondary" style={{ display: 'block', textAlign: 'center' }}>
                        {/* <a href="/">忘记密码？</a> */}
                    </Text>
                </div>
            </div>
            <footer>
                {/* <Text type="secondary">中国电信版权所有</Text> */}
            </footer>
        </div>
    );
};

export default Apps;
